Animated Happy Birthday Wishes Website using HTML, CSS, and JavaScript 🎉
Looking for a creative way to send happy birthday wishes animated to your loved ones? Instead of just sending a text or an image, you can surprise them with a beautiful birthday wishes animation built using HTML, CSS, and JavaScript. This unique project is a full animated happy birthday wishes website where every click reveals something new and magical.
🎁 What is this Birthday Wishes Project?
This code creates a three-page birthday wishes animation website that feels like a digital greeting card. The design includes smooth transitions, balloons, animated birthday messages, and even background music. The receiver clicks through each page to unlock heartfelt wishes, glowing text, and finally a special surprise gift.
✨ Main Features
- Multi-Page Layout: From a warm welcome to the final gift reveal, everything feels like an interactive journey.
- Animated Happy Birthday Text: Each letter of “Happy Birthday” appears with a fun bounce effect.
- Birthday Greetings Animated Balloons: Colorful balloons float across the screen to make the design lively.
- Personal Touch: Add a profile picture and name of the birthday person for a personalized experience.
- Gift Animation: A clickable gift box 🎁 that leads to the final birthday message.
- Music: Background audio plays automatically to make the greeting more memorable.
📄 How Does It Work?
The birthday animation website is created with a simple combination of HTML, CSS, and JavaScript:
1. HTML (Structure)
The HTML divides the project into three pages:
- Page 1: A welcome message with a “Click Here” button.
- Page 2: The animated happy birthday message with balloons, name, and profile photo.
- Page 3: A love message with roses as the final surprise.
CSS Animations
Each social media icon has its own unique hover animation effect:
- Facebook: Bounce with glowing blue border.
- Twitter: Tilt shake animation on hover.
- Instagram: Gradient glow with spinning border effect.
- YouTube: Pulse zoom animation.
- LinkedIn: Underline slide animation with glow.
- TikTok: Multi-color glowing shadow effect.
🌐 Social Media Icons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Happy Birthday Surprise 🎉</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Fredoka+One&family=Montserrat:wght@500;600&display=swap" rel="stylesheet" />
<style>
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body,
html {
height: 100%;
overflow: hidden;
background: black;
color: white;
}
.page {
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
transition: opacity 1s ease-in-out;
}
.active {
display: flex;
opacity: 1;
}
button {
padding: 15px 30px;
font-size: 1.2em;
border: none;
border-radius: 25px;
cursor: pointer;
background: linear-gradient(45deg, #ff4dc4, #9b59b6);
color: white;
transition: transform 0.3s ease, box-shadow 0.3s ease;
font-weight: bold;
}
button:hover {
transform: scale(1.1);
box-shadow: 0 0 15px #fff;
}
/* Page 1 */
#page1 {
background: linear-gradient(135deg, #ffdee9, #b5fffc);
animation: float 5s infinite alternate ease-in-out;
color: #333;
font-weight: bold;
}
#page1 h1 {
font-size: 2.5rem;
color: #333;
margin-bottom: 20px;
user-select: none;
}
/* ----- Page 2 (Replaced) ----- */
#page2 {
position: relative;
background: #FFD6E0;
font-family: 'Montserrat', sans-serif;
color: #B30047;
overflow: hidden;
}
.container {
text-align: center;
max-width: 90%;
}
.birthday-header {
font-family: 'Fredoka One', cursive;
margin-bottom: 8px;
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: nowrap;
white-space: nowrap;
font-size: clamp(1.8rem, 5vw, 3.5rem);
}
.birthday-letter {
display: inline-block;
opacity: 0;
transform: translateY(40px) scale(0.9);
animation: letterBounce 0.8s forwards;
font-weight: 900;
}
.letter-happy {
color: white;
-webkit-text-stroke: 2px black;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7);
}
.birthday {
background: linear-gradient(90deg, #FF4C84, #B30047);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes letterBounce {
0% {
opacity: 0;
transform: translateY(40px) scale(0.9);
}
60% {
opacity: 1;
transform: translateY(-8px) scale(1.05);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.love-text {
font-size: clamp(0.9rem, 2.5vw, 1.2rem);
color: #B30047;
margin-bottom: 10px;
font-weight: 600;
}
.date-btn {
background: #ff3366;
color: #fff;
padding: 6px 16px;
border-radius: 20px;
font-size: clamp(0.7rem, 2vw, 0.9rem);
font-weight: bold;
margin-bottom: 14px;
display: inline-block;
box-shadow: 0 4px 10px rgba(255, 51, 102, 0.5);
}
.profile-name-block {
opacity: 0;
transform: translateY(100px);
animation: imageSlideUp 1.4s forwards;
animation-delay: 2.2s;
}
@keyframes imageSlideUp {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.profile-image-container {
position: relative;
width: clamp(140px, 35vw, 220px);
height: clamp(140px, 35vw, 220px);
margin: 0 auto 16px;
border-radius: 50%;
padding: 6px;
background: linear-gradient(45deg, #FF4C84, #B30047, #ffffff);
animation: borderShift 6s ease infinite;
box-shadow: 0 0 25px rgba(255, 76, 132, 0.6), 0 8px 20px rgba(255, 76, 132, 0.3);
}
.profile-image-container img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
@keyframes borderShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.name-tag {
background: #FF3366;
padding: 8px 20px;
border-radius: 30px;
color: white;
font-weight: 700;
font-size: clamp(0.8rem, 2.5vw, 1.2rem);
display: inline-block;
box-shadow: 0 6px 14px rgba(255, 51, 102, 0.7);
}
.balloon {
position: absolute;
width: 12px;
height: 18px;
border-radius: 50%;
opacity: 0.7;
animation: fall linear infinite;
}
@keyframes fall {
0% {
transform: translateY(-10vh);
opacity: 1;
}
100% {
transform: translateY(110vh);
opacity: 0;
}
}
/* Gift in corner */
.gift-container {
position: absolute;
top: 25px;
right: 25px;
cursor: pointer;
text-align: center;
z-index: 1000;
user-select: none;
}
.gift {
font-size: 2.5rem;
color: #B30047;
animation: pulse 2s infinite;
filter: drop-shadow(0 0 6px #ff0080);
}
.gift-container:hover .gift {
animation: shake 0.5s infinite;
transform: scale(1.3);
filter: drop-shadow(0 0 15px #ff1493);
}
.arrow {
font-size: 1.5rem;
color: #B30047;
margin-top: 5px;
animation: bounce 1s infinite;
}
.gift-text {
font-size: 1rem;
margin-top: 3px;
font-weight: bold;
animation: glowText 2s infinite;
}
@keyframes pulse {
0%, 100% {
filter: drop-shadow(0 0 6px #ff0080);
}
50% {
filter: drop-shadow(0 0 18px #ff69b4);
}
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(5px);
}
}
@keyframes glowText {
0% {
color: #fff;
}
50% {
color: #ff0;
}
100% {
color: #fff;
}
}
/* Page 3 */
#page3 {
background: white;
overflow: hidden;
color: #b31217;
font-family: Arial, sans-serif;
}
#page3 h1 {
font-size: 3.5rem;
margin-top: 60px;
font-weight: 900;
text-align: center;
color: #b31217;
}
.premium-image-container {
width: 230px;
height: 230px;
margin: 30px auto 0;
border-radius: 18px;
padding: 6px;
background: linear-gradient(270deg, #ff0000, #ff69b4, #ffffff);
background-size: 600% 600%;
animation: gradientFlow 8s ease infinite;
box-shadow: 0 0 15px 6px rgba(255, 255, 255, 0.6), 0 0 35px 8px rgba(255, 192, 203, 0.4);
display: flex;
justify-content: center;
align-items: center;
}
@keyframes gradientFlow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.premium-image-container img {
width: 218px;
height: 218px;
border-radius: 15px;
border: 2.5px solid white;
object-fit: cover;
box-shadow: 0 0 15px 4px rgba(255, 255, 255, 0.85);
animation: heartbeat 5s ease-in-out infinite;
}
@keyframes heartbeat {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.07);
}
}
#page3 p {
font-size: 1.2rem;
color: #b31217;
text-align: center;
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<!-- Music -->
<audio id="bg-music" autoplay loop>
<source src="romantic.mp3" type="audio/mpeg" />
</audio>
<!-- Page 1 -->
<div class="page active" id="page1">
<h1>A Special Surprise Awaits You 🎁</h1>
<button onclick="nextPage(2)">Click Here</button>
</div>
<!-- Page 2 -->
<div class="page" id="page2">
<main class="container">
<h1 class="birthday-header" id="birthday-text"></h1>
<div class="love-text">To the love of my life ❤️</div>
<div class="date-btn">19 August 2025</div>
<div class="profile-name-block">
<div class="profile-image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Smiley.svg/240px-Smiley.svg.png" alt="Profile Picture" />
</div>
<div class="name-tag">Your Name Here</div>
</div>
</main>
<div class="gift-container" onclick="nextPage(3)">
<div class="gift">🎁</div>
<div class="arrow">⬇</div>
<p class="gift-text">Click here to collect your gift</p>
</div>
</div>
<!-- Page 3 -->
<div class="page" id="page3">
<h1>Love You Forever 💕</h1>
<div class="premium-image-container">
<img src="https://png.pngtree.com/png-vector/20201230/ourmid/pngtree-two-blooming-red-roses-flower-photography-picture-png-image_2677613.png" alt="Rose" />
</div>
<p>From Your Love💕</p>
</div>
<script>
function nextPage(num) {
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
const page = document.getElementById('page' + num);
page.classList.add('active');
}
const happyText = "HAPPY";
const birthdayText = "BIRTHDAY";
const birthdayContainer = document.getElementById('birthday-text');
function createLetterSpan(char, index, isBirthday = false) {
const span = document.createElement('span');
span.textContent = char;
span.classList.add('birthday-letter');
if (isBirthday) span.classList.add('birthday');
else span.classList.add('letter-happy');
span.style.animationDelay = `${index * 0.15}s`;
return span;
}
[...happyText].forEach((c, i) => birthdayContainer.appendChild(createLetterSpan(c, i, false)));
birthdayContainer.appendChild(document.createElement('span'));
[...birthdayText].forEach((c, i) => birthdayContainer.appendChild(createLetterSpan(c, i + happyText.length + 1, true)));
function createBalloon() {
const balloon = document.createElement("div");
balloon.classList.add("balloon");
document.body.appendChild(balloon);
const colors = ["#FF4C84", "#FFB347", "#6FA8DC", "#77DD77", "#FFD700"];
balloon.style.background = colors[Math.floor(Math.random() * colors.length)];
balloon.style.left = Math.random() * 100 + "vw";
balloon.style.animationDuration = (3 + Math.random() * 4) + "s";
setTimeout(() => balloon.remove(), 7000);
}
setInterval(createBalloon, 400);
</script>
</body>
</html>
2. CSS (Design & Animation)
All visual effects and animations come from CSS:
- Bouncing letters for happy birthday messages animated.
- Color gradients and glowing shadows for a premium look.
- Balloons floating down the screen using
@keyframes. - Pulsing gift box and heartbeat animation for the roses.
3. JavaScript (Interactivity)
JavaScript makes the page interactive by:
- Switching between different pages when buttons are clicked.
- Creating random balloons that fall continuously.
- Adding animated delay for each letter of the birthday text.
🎨 How to Customize
You can easily personalize this birthday wishes animation for anyone:
- Replace Your Name Here with the real name of the person.
- Change the profile photo by updating the image link.
- Replace the background music with a favorite song.
- Update the date to match the birthday.
- Modify colors, fonts, or text to suit your style.
🎉 Final Thoughts
This animated birthday wishes website is a fun, modern, and emotional way to make someone feel truly special. Instead of sending a plain GIF or text, you can now gift a personalized birthday greetings animated webpage that feels like magic. Try it once, and you’ll see how unforgettable such a surprise can be!
